<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background-color: darkorange;
    }
  </style>
  <body>
    <div style="background-color: bisque; width: 100%; height: 100%">
      <div id="main" style="width: 100%; height: 100%"></div>
    </div>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script>
      option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 50, name: "完成率" }],
          },
        ],
      };
      option.series[0].data[0].value = 0;
      var myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    </script>

    <script>
      var root = window.parent;

      root.registerUpdateHandler("panel5", (data) => {});

      root.subscribeEvent("panel4", "event4", (data) => {
        option.series[0].data[0].value = (data.percent+(Math.random()*50)).toFixed(2);
        myChart.setOption(option);
      });

      //   setInterval(() => {
      //     root.trigger("panel2", "event2", {
      //       msg: "event from panel2",
      //       time: new Date(),
      //     });
      //   }, 1000);
    </script>
  </body>
</html>
